<template>
    <div id="articleAll">
            <div class="a-a-article" v-for="(item, index) in articles" :key="index">
                    <img v-bind:src="item.image"  v-on:click="goArticle(item.id)"/>
                    <div class="article-text">
                        <h1 v-on:click="goArticle(item.id)">{{item.title}}</h1>
                        <p>{{item.subContent}}</p>
                        <div class="article-other">
                            <ul>
                                <li class="a-o-postDate">{{item.postDate}}</li>
                                <li class="a-o-source">{{item.source}}</li>
                                <li class="a-o-browse">{{item.browse}}</li>
                                <li class="a-o-endorse">{{item.endorse}}</li>
                                <li class="a-o-tag">[<label v-for="(item0, index0) in item.tags" :key="index0"> {{item0.name}} </label>]</li>
                            </ul>
                        </div>
                    </div>
            </div>
    </div>
</template>
<script>
import https from '../../https'

export default {
  name: 'articleAll',
  data () {
    return {
      articles: []
    }
  },
  mounted () {
    https.fetchPost('/article/getByPagePub', {}).then((data) => {
      this.articles = data.data.data
    }).catch(err => function () {
      console.log(err)
    })
  },
  methods: {
    goArticle: function (id) {
      this.$router.push({name: 'articleInfo', query: {id: id}})
    }
  }
}
</script>
<style scoped>
#articleAll{
    width: 770px;
    margin: 3rem 0 0 0;
}
.i-a-title{
    margin: 1rem;
    width: 770px;
}
.i-a-title p{
    margin: auto;
    color: #fff;
    width: 10rem;
    font: normal 1.5rem/2.5rem 微软雅黑;
    background-color: rgb(29,205,199);
    border-radius: 0.5rem;
    letter-spacing: 0.5rem;
}
.a-a-article{
    width: 770px;
    height: 262px;
    margin: 1rem 0 0 0;
    background-color: rgb(255, 255, 255, 0.8);
    text-align: left;
    display: flex;
}
.a-a-article img{
    cursor: pointer;
    margin: 1rem;
    width: 300px;
    height: 190px;
    transition: width 0.6s, height 0.6s, margin 0.6s;
    -moz-transition: width 0.6s, height 0.6s, margin 0.6s;	/* Firefox 4 */
    -webkit-transition: width 0.6s, height 0.6s, margin 0.6s;	/* Safari 和 Chrome */
    -o-transition: width 0.6s, height 0.6s, margin 0.6s;	/* Opera */
}
.a-a-article img:hover{
    margin: 0.6rem;
    width: 310px;
    height: 200px;
}
.article-text h1{
    cursor: pointer;
    margin: 1rem;
    max-width: 430px;
    font: normal 1.5rem/2rem 微软雅黑;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: table-caption;
    border-bottom: 1px solid #fff;
}
.article-text h1:hover{
    border-bottom: 1px solid #000;
}
.article-text p{
    margin: 1rem;
    margin-bottom: 1rem;
    font: normal 0.8rem/1rem 微软雅黑;
    height: 80px;
    width: 420px;
    position:relative;
	line-height:20px;
	overflow:hidden;
}
.article-text p::after{
  content: " ";
	position:absolute;
	bottom:0;
	right:0;
	padding-left:40px;
	background:-webkit-linear-gradient(left,transparent,#fff 55%);
	background:-o-linear-gradient(right,transparent,#fff 55%);
	background:-moz-linear-gradient(right,transparent,#fff 55%);
	background:linear-gradient(to right,transparent,#fff 55%);
}
.article-other ul{
    margin: 1rem;
}
.article-other ul li{
    display: inline-block;
    list-style: none;
    margin: 0 0.5rem 0 0;
    color: rgb(114, 113, 113);
    font: normal 0.6rem/1rem 微软雅黑;
    padding-left: 1.1rem;
}
.a-o-postDate{
    background: url(../../assets/postDate.png) no-repeat;
}
.a-o-source{
    background: url(../../assets/source.png) no-repeat;
}
.a-o-browse{
    background: url(../../assets/browse.png) no-repeat;
}
.a-o-endorse{
    background: url(../../assets/endorse.png) no-repeat;
}
.a-o-tag{
    background: url(../../assets/tag.png) no-repeat;
}
.i-a-more{
    text-align: right;
    color: #fff;
    cursor: pointer;
}
.i-a-more span{
    background-color: rgb(29,205,199);
    padding: 0.4rem;
    border-radius: 0.5rem;
    border-bottom: 1px solid rgb(29,205,199);
}
.i-a-more span:hover{
    background: none;
    color: rgb(29,205,199);
    border-radius: 0;
}
</style>

